.card-container{
  background-color: white;
  padding: 2rem 5rem;
  position: relative;
//   width: 80%;
  width: 100%;
//   margin: -10em auto 20px;
  margin: 0 auto;

  @media (max-width: $screen-md) {
    padding: 2rem 0;
    margin: 0 auto; // 改为不向上顶
    // margin-top: -5em; 
    width: 100%;
  }
  //   手机端的设置
  @media (max-width: $screen-xs) {
    padding: 2rem 0;
    margin-top: 0;
    width: 100%;
    p.blog_info{
        text-align: left !important;
    }
  }
  &.card-container-lg{
    transition: opacity .3s,bottom .3s;
    @media (max-width: $screen-md) {
      width: 95%;
      padding: 2rem 3em;
      margin-top: -4em;
    }
    @media (min-width: $screen-md) {
        // width: 80%;
        padding: 2rem 3em;
        margin-top: -10em;
      }
  }
}

.black-image-project-hover{
  display: block;
  i:hover ~img{
      filter: none;
  }
  img{
    -webkit-filter: contrast(200%) grayscale(100%);  /* Safari */
    filter: contrast(200%) grayscale(100%);
    @include transition(all .1s linear);
    &:hover{
      filter: none;
    }
    @media (max-width: $screen-md) {
      filter: none;
    }
  }
}
.black-image-project-hover:hover ~.card-container-lg{
    bottom: 0;
    opacity: 0;
}

.projects-carousel{
  @media (max-width: $screen-sm) {
    .carousel-control{
      display: none;
    }
    .carousel-inner > .item{
      display: block;
    }
  }
}